import React, { Component } from 'react'
import { getSinglApi,addShopcartApi } from "@/api/goods"
import { NavBar, Swiper, Toast, TabBar, Dialog } from 'antd-mobile'
import style from "./index.module.scss"
import qs from "query-string"
import {
  StarOutline,
  StarFill,
  FillinOutline,
  ShopbagOutline,
} from 'antd-mobile-icons'
const tabs = [
  {
    key: 'Home',
    title: '收藏',
    icon: <StarOutline />

  },
  {
    key: 'Classify',
    title: '分享',
    icon: <FillinOutline />,
  },
  {
    key: '/GoodsCart',
    title: '购物车',
    icon: <ShopbagOutline />
  },
]
export default class index extends Component {
  state = {
    goodArr: {},
    banners: [],
    salesPrice: {},
  }
  componentDidMount() {
    // console.log('this.props',qs.parse(this.props.location.search).id);
    this.getSingl()
  }
  // 获取单个详情页数据
  async getSingl() {
    let res = await getSinglApi({
      goodid: qs.parse(this.props.location.search).id,
    })
    if (res.data.code === 200) {
      this.setState({
        goodArr: res.data.goodinfo,
        banners: [...res.data.goodinfo.pics],
        salesPrice: res.data.goodinfo.salesPrice,
      })
    } else {
      Toast.show({
        content: res.data.msg,
        afterClose: () => {
          console.log('after')
        },
      })
      this.props.history.push("/Home")
    }
    console.log('getSinglApi', res.data);
  }
  // 点击返回回到首页
  onBack = () => {
    this.props.history.go(-1)
  }
  addShopcart=async()=>{
    
    let res=await addShopcartApi({
      goodid:`${this.state.goodArr.id}`,
      userid:`${JSON.parse(sessionStorage.getItem('user-msg')).id}`,
    })
    
    if (res.data.code===200) {
      console.log(res);  
    }
  }
  transferGoodsCart=async()=>{
    this.addShopcart()
    Toast.show({
      icon: 'success',
      content: '添加购物车成功',
    })
    
  }
  // 判断按钮为购物车或收藏进行对应操作
  add = async (value) => {
    console.log(value);
    if (value == '/GoodsCart') {
      this.props.history.push('/GoodsCart')
    }else if(value == 'Home'){
      Toast.show({
        icon: 'success',
        content: '添加收藏成功',
      })
      // 发请求收藏
    }
  }
  
  render() {
    console.log('this.state.banners', this.state.salesPrice);

    return (
      <div className={style.detail}>
        <div className={style.top}>
          <NavBar onBack={this.onBack}>标题</NavBar>
          <Swiper
            loop
            autoplay
            indicatorProps={{
              color: 'white',
            }}
            defaultIndex={0}
            className={style.Swiper}
          >
            {this.state.banners.map((item, index) =>
            (
              <Swiper.Item key={index}>
                {<img src={item} className={style.img} />}
              </Swiper.Item>
            )
            )
            }
          </Swiper>
          <div className={style.p}>
            <span>原价{this.state.salesPrice.value}</span>
            <span>距结束5天0小时</span>
          </div>
          <div className={style.p1}>
            <h5>活动价¥<span>{this.state.salesPrice.value}</span></h5>
            <span>包邮包售</span>
          </div>
          <h3 className={style.h4}>{this.state.goodArr.name}</h3>
          {this.state.banners.map((item, index) => {
            return (
              <img src={item} key={index} className={style.image} />
            )
          })}
        </div>
        <ul className={style.bottom}>
          <TabBar className={style.TabBar} onChange={value => this.add(value)}>
            {tabs.map((item, index) => (
              <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
            ))}

          </TabBar>
          <li>
            <span className={style.yellow} onClick={this.transferGoodsCart}>加入购物车</span><span className={style.red}>立即购买</span>
          </li>

        </ul>
      </div>
    )
  }
}

